<template>
  <view class="mode" v-if="show">
    <view class="mode-content">
      <view class="text_title">奥利奥玩心小宇宙隐私保护指引</view>
      <view class="text_content">
        为了保障您的权益，在使用[奥利奥玩心小宇宙]服务之前，请仔细阅读并同意
        <text class="blueColor" @click="handleOpenPrivacyContract">
          《奥利奥玩心小宇宙隐私保护指引》
        </text>
        ，若您不同意该协议或政策，无法继续使用小程序服务。
      </view>

      <view class="btn_view">
        <!-- <view class="disagree" @click="handleDisagree">不同意</view> -->
        <navigator class="disagree" open-type="exit" target="miniProgram">
          不同意
        </navigator>
        <view>
          <button
            id="agree-btn"
            type="primary"
            open-type="agreePrivacyAuthorization"
            @agreeprivacyauthorization="handleAgreePrivacyAuthorization"
          >
            同意并继续
          </button>
        </view>
      </view>
    </view>
  </view>
</template>
    
<script setup>
import { oss2 } from "@/utils/utils";
import { onMounted, ref, defineEmits } from "vue";
const emits = defineEmits(["agreePrivacy"]);

const show = ref(false);
const privacyName = ref("");

onMounted(() => {
  wx.getPrivacySetting({
    success: (res) => {
      console.log("---getPrivacySetting---", res.needAuthorization);
      // show.value = res.needAuthorization;
      // privacyName.value = res.privacyContractName;
    },
    fail: () => {},
    complete: () => {},
  });
});

wx.onNeedPrivacyAuthorization((resolve, eventInfo) => {
  console.log("触发本次事件的接口是：" + eventInfo.referrer);
  // 弹出开发者自定义的隐私授权弹窗
  show.value = true;
});
const handleOpenPrivacyContract = () => {
  wx.openPrivacyContract({
    success: () => {}, // 打开成功
    fail: () => {}, // 打开失败
    complete: (res) => {
      console.log(res, "openPrivacyContract complete");
    },
  });
};
const handleDisagree = () => {
  show.value = false;
};
const handleAgreePrivacyAuthorization = (res) => {
  // 用户点击了同意，之后所有已声明过的隐私接口和组件都可以调用了
  show.value = false;
  //通知父组件
  emits("agreePrivacy");
  console.log(res, "handleAgreePrivacyAuthorization");
};
</script>
    
    <style lang="less" scoped>
.mode {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  background-color: rgba(0, 0, 0, 0.7);
  .mode-content {
    width: 285px;
    height: 200px;
    background-color: #fff;
    border-radius: 9px;
    box-sizing: border-box;
    padding: 21px 30px 0;
    position: absolute;
    top: calc(50vh - 120px);
    left: 45px;
    .text_title {
      height: 19px;
      line-height: 19px;
      font-size: 15px;
      font-family: FZLanTingYuanS-R-GB;
      font-weight: bold;
      color: #45494c;
      text-align: center;
      margin-bottom: 21px;
    }
    .text_content {
      font-size: 11px;
      line-height: 18px;
      font-family: FZLanTingYuanS-R-GB;
      font-weight: 400;
      color: #45494c;
    }
    .blueColor {
      color: #005dc9;
    }
    .btn_view {
      width: 100%;
      height: 44px;
      box-sizing: border-box;
      padding: 0 9px;
      border-top: 1px solid #e5e5e5;
      position: absolute;
      bottom: 0;
      left: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .disagree {
        width: 133px;
        height: 44px;
        border-right: 1px solid #e5e5e5;
        line-height: 44px;
        text-align: center;
        font-size: 14px;
        font-family: FZLanTingYuanS-R-GB;
        font-weight: 400;
        color: #45494c;
      }

      button {
        width: 133px;
        height: 44px;
        font-size: 14px;
        line-height: 44px;
        background-color: transparent;
        color: #0058c6;
        &::after {
          border: none;
        }
      }
    }
  }
}
</style>
